<template>
  <div class="hello">
    <el-container>
      <el-header>徐州协鑫-日进PDA</el-header>
      <el-main>
        <el-form
          label-position="top"
          label-width="80px"
          :model="formLabelAlign"
        >
          <el-form-item label="当前用户">
            <el-input v-model="formLabelAlign.input1"></el-input>
          </el-form-item>
          <el-form-item label="登录时间">
            <el-input v-model="formLabelAlign.input2"></el-input>
          </el-form-item>
          <el-form-item label="设备编号">
            <el-input v-model="formLabelAlign.input3"></el-input>
          </el-form-item>
          <el-form-item label="ip地址">
            <el-input v-model="formLabelAlign.input4"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary">设定</el-button>
        <el-button type="primary">重新获取</el-button>
      </el-main>
      <el-footer>
        <div>首页</div>
        <router-link to="/about">About</router-link>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      formLabelAlign:{
        input1: "当前用户",
        input2: "登录时间",
        input3: "设备编号",
        input4: "ip地址",
      },
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-main {
  font-size: 15px;
  .el-input {
    width: 80vw;
    .el-input__inner {
      height: 10vw;
      font-size: 15px;
    }
  }
  .el-button{
    width:90vw;
    margin: 10px 0px;
  }
}
.el-header,
.el-footer {
  background-color: #303030;
  color: #fff;
  text-align: left;
  line-height: 60px;
  width: 100vw;
  font-size: 20px;
}
.el-footer {
  position: fixed;
  bottom: 0px;
  background-color: #b5b5b5;
  div{
    display: inline-block;
    width:44vw;
    text-align: center;
  }
}
</style>
